<template>
  <div class="contain-edit">
    <div class="header">
      <p>合同管理/查看详情</p>
      <el-button class="link" type="primary">
        <router-link to="/contractList" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <div class="list">
        <div class="title">{{ info && info.contractName ? info.contractName : ''}}</div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key" style="line-height: 1.4; padding-top: 10px;padding-bottom: 10px">出租方（以下简称甲方）:</div>
            <div class="item-value">{{ info && info.landlordName ? info.landlordName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key" style="line-height: 1.4; padding-top: 10px;padding-bottom: 10px">承租方（以下简称乙方）:</div>
            <div class="item-value">{{ info && info.renterName ? info.renterName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key" style="height: 100%">合同条款</div>
            <div class="contract-content" style="padding-left: 170px;padding-top:20px;padding-bottom: 20px">
              <p>第一条房屋基本情况。</p>
              <p>甲方房屋(以下简称该房屋)坐落于{{content.houseAddr ? content.houseAddr : ''}}</p><br>
              <p>第二条房屋用途。</p>
              <p>该房屋用途为租赁住房</p>
              <p>除双方另有约定外,乙方不得任意改变房屋用途。</p><br>
              <p>第三条租赁期限。</p>
              <p>租赁期限自{{content.checkInDate && content.checkInDate.year ? content.checkInDate.year : ''}}年{{content.checkInDate && content.checkInDate.month ? content.checkInDate.month : ''}}月{{content.checkInDate && content.checkInDate.day ? content.checkInDate.day : ''}}日至{{content.checkOutDate && content.checkOutDate.year ? content.checkOutDate.year : ''}}年{{content.checkOutDate && content.checkOutDate.month ? content.checkOutDate.month : ''}}月{{content.checkOutDate && content.checkOutDate.day ? content.checkOutDate.day : ''}}日止</p><br>
              <p>第四条租金。</p>
              <p>该房屋月租金为(人民币大写){{content.longRent ? content.longRent+'元' : ''}}</p>
              <p>租赁期间,如遇到国家有关政策调整,则按新政策规定调整租金标准;除此之外,出租方不得以任何理由任意调整租金。</p><br>
              <p>第五条付款方式。</p>
              <p>乙方按支付租金给甲方</p><br>
              <p>第六条交付房屋期限。</p>
              <p>甲方应于本合同生效之日起日内,将该房屋交付给乙方。</p><br>
              <p>第七条甲方对房屋产权的承诺</p>
              <p>甲方保证拥有房屋产权,提供相应证明。在交易时该房屋没有产权纠纷;除补充协议另有约定外,有关按揭、抵押债务、税项及租金等,甲方均在交亻付房屋前办妥。交易后如有上述未清事项,由甲方承担全部责任,由此给乙方造成经济损失的,由甲方负责赔偿。</p>
            <br>
              <p>第八条维修养护责任</p>
              <p>正常的房屋大修理费用由甲方承担:日常的房屋维修费用由乙承担。因乙方管理使用不善造成房屋及其相连设备的损失和维修费用,由乙方承担并责任赔偿损失。租赁期间,防火安全,门前三包,综合治理及安全、保卫等工作,乙方应执行当地有关部门规定井承担全部责任和服从甲方监督检查。</p>
            <br>
              <p>第九条关于房屋租赁期间的有关费用。</p>
              <p>在房屋租赁期间,以下费用由乙方支付:</p>
              <p>1.  水、电费 </p>
              <p>2.  煤气费  </p>
              <p>以下费用由甲方支付</p>
              <p>1.  供暖费  </p>
              <p>2.   物业管理费</p><br>
              <p>第十条房屋押金</p>
              <p>甲、乙双方自本合同签订之日起,由乙方支付甲方{{content.deposit}}元(相当于一个月房租的金额)作为押金。</p><br>
              <p>第十一条租赁期满</p>
              <p>1、租赁期满后,如乙方要求继续租赁,甲方则优先同意继续租赁； 2、租赁期满后,如甲方未明确表示不续租的,则视为同意乙方继续承租；</p><br>
              <p>第十二条违约责任。</p>
              <p>租赁期间双方必须信守合同,任何一方违反本合同的规定,按年度须向对方交纳三个月租金作为违约金。</p><br>
              <p>第十三条因不可抗力原因导致该房屋毁损和造成损失的,双方互不承担责任。</p><br>
              <p>第十四条本合同未尽事项,由甲、乙双方另行议定,并签订补充协议。补充协议与本合同不一致的,以补充协议为准。</p><br>
              <p>第十五条本合同之附件均为本合同不可分割之一部分。本合同及其附件内,空格部分填写的文字与印刷文字具有同等效力。本合同及其附件和补充协议中未规定的事项,均遵照中华人民共和国有关法律、法规和政策执行。</p>
            <br>
              <p>第十六条其他约定</p>
              <p>(一)出租方为乙方提供物品如下:</p>
              <p>
                <span v-for="(item, index) in content.houseAllocateArr" :key="index">{{item}};</span>
              </p>
              <p>(二)当前的水、电等表状况</p>
              <p>(1)水表现为:{{content.waterReadouts}}度;(2)电表现为:{{content.electricReadouts}}度</p><br>
              <p>第十七条争议解决</p>
              <p>本合同在履行中发生争议,由甲、乙双方协商解决。协商不成时,甲、乙双方可向人民法院起诉。</p><br>
              <p>第十八条合同份数</p>
              <p>本合同自甲、乙双方签字之日起生效,一式两份,甲、乙双方各执一份,具有同等效力。</p>
          </div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">甲方:</div>
            <div class="item-value">{{ info && info.landlordName ? info.landlordName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">乙方:</div>
            <div class="item-value">{{ info && info.renterName ? info.renterName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">电话:</div>
            <div class="item-value">{{ info && info.landlordMobile ? info.landlordMobile : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">电话:</div>
            <div class="item-value">{{ info && info.renterMobile ? info.renterMobile : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">日期:</div>
            <div class="item-value">{{ info && info.landlordSignTime ? info.landlordSignTime : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">日期:</div>
            <div class="item-value">{{ info && info.renterSignTime ? info.renterSignTime : ''}}</div>
          </div>
        </div>
        <!--<div class="item" style="min-height: 150px">-->
          <!--<div class="item-key" style="height: 150px;line-height: 150px">合同条款:</div>-->
          <!--<div class="item-value" style="height: 150px;">{{ info && info.contractContent ? info.contractContent : ''}}</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");

  export default {
    data() {
      return {
        id:'',
        info: {
          contractName: "",
          renterName: "",
          renterMobile: "",
          landlordName: "",
          landlordMobile: "",
          renterSignKey: "",
          landlordSignKey: "",
          gmtCreated: "",
          contractContent: "",
          landlordSignTime: "",
          renterSignTime: ""
        },
        content: {},
        identify: "",
      }
    },
    created() {
      this.identify = sessionStorage.getItem("identify")
    },
    mounted() {
      this.id  = this.$router.currentRoute.query.id;
      this.getDetail(this.id);
    },
    methods: {

      getDetail(id){
        let url = this.identify == 1 ? CONSTANT.URL.CONTRACT.DETAIL : CONSTANT.URL.L_CONTRACT.DETAIL;
        let param = {
          id:id
        };
        common.requestAjax(url,{},param,(res)=>{
          this.loading = false;
          this.info = res.data.bussData;
          this.content = JSON.parse(res.data.bussData.contractContent)
          console.log(this.content)
        })
      },
      trantdata(data){
        var date = new Date(data);
        var mon = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var nowDay = mon + "月" +(day<10?"0"+day:day)+"日" + (hours<10?"0"+hours:hours)+":" +(minutes<10?"0"+minutes:minutes);
        return nowDay;
      },

    },
  }
</script>
<style lang="scss" scoped>
  .contract-content {
    p{
      margin: 0;
      padding: 0;
    }
  }
  .item-left {
    float: left;
    width: 120px;
    padding-left: 20px;
    padding-right: 10px;
    // height: 40px;
    line-height: 40px;
    text-align: right;
    border-right: 1px solid #dedede;
  }
  .item-right {
    // height: 40px;
    // line-height: 40px;
    padding-left: 20px;
    float: left;
  }
  .backage {
    height: auto;
    border: 1px solid #dedede;
    border-top: none;
  }
  .analyse{
    margin-left: 151px;
    height:530px;
    padding-top: 20px;
    display: flex;
  }
  .pic{
    width:330px;
    height:530px;
    // background-color:yellowgreen;
    display: inline-block;
    margin-right: 30px;
    padding-left: 20px;
    .avatar-info{
      .avatar{
        width:100px;
        height:100px;
        background-color:#626262;
        margin-top:50px;
        border-radius:50%;
        float:left;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        // float:left;
        // margin-top:50px;
        margin-left:10px;
        padding: 60px 20px;
      }
    }
  }
  .pic-font{
    border-left: 5px solid #999;
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: pink;
    // margin-left: 15px;
    margin-bottom: 15px;
    display: block;
  }
  .wins{
    display: inline-block;
    height: 350px;
    flex: 1;
  }
  .match{
    list-style:none;
    padding-left:20px;
    margin-top:20px;
    .match-item{
      width: 300px;
      height:50px;
      background-color: #eee;
      margin-bottom:30px;
    }
  }
  #chart{
    width:300px;
    height:300px;
  }
  .honor {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    // background-color: yellow;
    .honor-img{
      width: 70px;
      height: 70px;
      padding: 30px 40px 0px 40px;
    }
    .honor-span{
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 55px;
    }
    .honor-text{
      display: block;
      text-align: center;
      font-size: 14px;
    }
  }

</style>


